<template>
  <BasicModal
    destroyOnClose
    v-bind="$attrs"
    @register="registerModal"
    title="预览"
    footer=""
    wrap-class-name="full-modal"
    @cancel="clearDom"
  >
    <div class="empty-tips">
      <div v-if="loading">{{ textShow || '文件加载中，请稍等……' }}</div>
      <div v-if="previewFailed">很抱歉，文件预览失败，请尝试下载后查看</div>
      <div v-if="filetype === 1">
        <Image
          :width="auto"
          :height="auto"
          fallback=""
          :src="uri"
        />
      </div>
      <div v-if="filetype === 2"> <VideoPlayer v-bind="options" /> </div>
      <div v-if="filetype === 3">
        <vue-pdf-embed :source="uri" />
      </div>
      <div v-if="filetype === 4">
        <div id="app">
          <!-- 准备一个容器用来存放音乐播放器 -->
          <div ref="musicRef"> </div>
        </div>
      </div>
    </div>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  // 详情请查看 https://github.com/xdlumia/vue3-video-play
  import VideoPlayer from 'vue3-video-play';
  import 'vue3-video-play/dist/style.css';
  // 详情请查看 https://github.com/DIYgod/APlayer
  import APlayer from 'APlayer';
  import 'APlayer/dist/APlayer.min.css';
  // PDF预览
  import VuePdfEmbed from 'vue-pdf-embed';
  import { Image } from 'ant-design-vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { downloadApi, previewApi } from '/@/api/business/file';
  export default defineComponent({
    name: 'PrevieModal',
    components: { BasicModal, VideoPlayer, Image, VuePdfEmbed },
    emits: ['success', 'register'],
    setup(_, {}) {
      const uri = ref('');
      const loading = ref(true);
      const filetype = ref('');
      //npm install @liripeng/vue-audio-player
      const previewFailed = ref(false);
      const textShow = ref('');
      // 视频相关属性
      const options = /// <reference path="" />
        ref({
          width: 'auto', //播放器高度
          height: 'auto', //播放器高度
          color: '#409eff', //主题色
          muted: false, //静音
          webFullScreen: false,
          speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
          autoPlay: false, //自动播放
          loop: false, //循环播放
          mirror: false, //镜像画面
          ligthOff: false, //关灯模式
          volume: 0.3, //默认音量大小
          control: true, //是否显示控制器
          title: '', //视频名称
          src: '', //视频源
          poster: '', //封面
        });
      // 音频相关属性 只播放一首歌
      const musicRef = ref(null);
      const musicAudio = ref([
        // 歌曲列表
        {
          name: '未知', // 歌曲名字
          artist: '未知', // 歌曲演唱者
          // 歌曲地址（这里用外链地址）
          url: '',
          cover: '', // 歌曲头像
          lrc: '', // 歌词
          theme: 'rgb(127, 218, 180)', // 播放这首歌曲时的主题色
        },
      ]);
      const musicInfo = ref({
        fixed: false, // 不开启吸底模式
        listFolded: true, // 折叠歌曲列表
        autoplay: true, // 开启自动播放
        preload: 'auto', // 自动预加载歌曲
        loop: 'all', // 播放循环模式、all全部循环 one单曲循环 none只播放一次
        order: 'list', //  播放模式，list列表播放, random随机播放
      });
      const [registerModal, { setModalProps }] = useModalInner(async (data) => {
        //做初始化
        loading.value = true;
        setModalProps({ loading: true, confirmLoading: true });
        const id = data?.id;
        const type = data?.type;
        filetype.value = type;
        try {
          //预览文件 支持图片 视频 文档 音乐 PDF
          if (type === 3) {
            const sss = await previewApi(id);
            uri.value = sss;
          } else if (type === 1) {
            //TODO 图片展示
            const sss = await downloadApi(id);
            uri.value = sss;
          } else if (type === 2) {
            //TODO 视频播放
            const sss = await downloadApi(id);
            uri.value = sss;
            options.value.src = sss;
          } else if (type === 4) {
            //TODO 音频播放
            const sss = await downloadApi(id);
            uri.value = sss;
            musicAudio.value[0].name = data?.fileName;
            musicAudio.value[0].url = sss;
            initAudio();
          } else {
            textShow.value = '该类型文件暂不支持预览';
          }
          loading.value = false;
          setModalProps({ loading: false, confirmLoading: false });
        } catch (e) {
          loading.value = false;
          previewFailed.value = true;
          setModalProps({ loading: false, confirmLoading: false });
        }
      });
      function initAudio() {
        // 创建一个音乐播放器实例，并挂载到DOM上，同时进行相关配置
        new APlayer({
          container: musicRef.value,
          audio: musicAudio.value, // 音乐信息
          ...musicInfo.value, // 其他配置信息
        });
      }
      const clearDom = () => {
        uri.value = '';
        if (musicRef.value) {
          musicAudio.value[0].name = '';
          musicAudio.value[0].url = '';
          initAudio();
        }
      };
      return {
        registerModal,
        loading,
        previewFailed,
        uri,
        filetype,
        textShow,
        options,
        musicRef,
        clearDom,
      };
    },
  });
</script>
<style scoped>
  .empty-tips {
    height: auto;
    line-height: 100px;
    text-align: center;
  }
  .iframe_main {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 0;
    box-sizing: border-box;
  }

  #app {
    width: 100%;
    height: 100%;
    padding: 80px;
  }
  .app {
    width: 100px;
    height: 100px;
  }
  ::v-deep(.vue-pdf-embed canvas) {
    width: 100% !important;
    height: 100% !important;
  }
</style>
